<script setup lang="ts">
import { ref, computed, ComputedRef, Ref, nextTick } from "vue";
import Mock from 'mockjs';
const isPlay = ref(false);
interface UItem {
  id: string | number
  name: string
  children?: UItem[]
}
const domref: Ref<HTMLDivElement | null> = ref(null)
const inival = Mock.mock({
  "item|5": [{
    "id|+1": 1,
    "name": '部门@id',
    "children|10-15": [
      {
        "id": '@id',
        "name": "@ctitle(6,12)"
      }
    ]
  }]
})
// console.log(inival,'数据')
let timer = ref(0)
const dataList: Ref<UItem[]> = ref(inival.item)
let sTop = ref(0);
let sHeight = ref(0);
let cHeight = ref(0);


const handleChange = () => {
  console.log("值变量", isPlay.value);
  if (isPlay.value) {
    // 自动轮播
    // 获取当前的容器高度
    // 获取当前活跃的index值
    const maxIndex = dataList.value.length;
    // 拿到当前的index 
    timer.value = setInterval(() => {
      console.log('进来了')
      const currIdx = dataList.value.findIndex((item) => item.id === seledDep.value)
      console.log(currIdx)

      // const sh=domref.value!.scrollHeight 
      // const st = domref.value!.scrollTop
      // const ch = domref.value!.clientHeight
      if (domref.value!.clientHeight + domref.value!.scrollTop < domref.value!.scrollHeight - 2) {
        console.log(domref.value!.clientHeight, "当前高度")
        console.log(domref.value!.scrollTop, "头部高度")
        console.log(domref.value!.scrollHeight, "总高度")


        domref.value!.scrollTop = domref.value!.scrollTop + 3
        console.log('还有这里')
      } else {
        console.log("触底了")
        // 切换当前活跃值
        let next = (currIdx + 1) % maxIndex;
        domref.value!.scrollTop = 0
        nextTick(() => {
          seledDep.value = dataList.value.filter((item, index) => {
            return index === next
          })[0].id as number
        })



      }
    }, 500)
    console.log(domref.value!.scrollTop, "滚动高度")
    console.log(domref.value!.scrollHeight, '总高度')
    console.log(domref.value!.clientHeight, '自身高度')

  }
  else{
    // 取消自动轮播
    clearInterval(timer.value);
  }
}
const seledDep = ref(1)


const activeItem: ComputedRef<UItem> = computed(() => {
  return dataList.value.filter(item => item.id === seledDep.value)[0];
})

// 自动轮播功能
const handleItemChange=(tar:UItem)=>{
  seledDep.value = tar.id as number;
  domref.value!.scrollTop=0
  clearInterval(timer.value);
  handleChange();

}
</script>

<template>
  <div>
    <p> 轮播组件</p>
    <input type="checkbox" name="" id="" v-model="isPlay" @change="handleChange">自动轮播

    <div class="data-wrap">
      <div class="data-left">
        <div class="data-left__item" :class="{ select: seledDep === item.id }" v-for="item in dataList" :key="item.id"
          @click="handleItemChange(item)">

          {{ item.name }}</div>

      </div>
      <div class="data-right" ref="domref">
        <div class="data-right__item"
         v-for="item in activeItem.children"
         >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.data-wrap {
  height: 400px;
  width: 600px;
  /* background-color:blueviolet; */
  border: 1px solid #ccc;
  display: flex;

}

.data-left {
  width: 40%;
  /* background-color: #646cffaa; */
  border-right: 1px solid #ccc;
}

.data-left__item {
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #000;
  margin: 15px auto;
  width: 80%;

}

.data-left__item.select {
  color: crimson;
  font-weight: bold;
  border: 3px solid crimson;
}

.data-right {
  width: 60%;
  height: 100%;
  overflow: auto;
  scroll-behavior: smooth;
}

.data-right__item {
  height: 30px;
  width: 80%;
  margin: 10px auto;
  border: 1px solid #ccc;
  line-height: 30px;
  text-align: center;





}
</style>
